<template>
	<view class="comp-favorite-praise-item" v-if="itemData" @tap="handleToDetail">
		<view class="container-item">
			<view class="item-title-praise">
				<view class="item-title">
					<image class="icon-Q" src="/static/icon_question.png"></image>
					<view class="wrap-title">{{itemData.show_mid_table_remark_001}}</view>
				</view>
				<image class="icon" :src="showIcon"  @tap.stop="handleCancel"></image>
			</view>
			<view class="item-content">{{itemData.show_mid_table_remark_002}}</view>
		</view>
	</view>
</template>

<script setup>
	import {computed} from "vue"
	const props=defineProps({
		itemIdx:{
			type:Number,
			default:-1
		},
		itemType:{
			type:String,
			default:'favorite'
		},
		itemData:{
			type:Object,
			default:()=>{
				return null
			}
		}
	})
	const emits=defineEmits(['onCancel','onDetail'])
	const showIcon=computed(()=>{
		if(props.itemType=='favorite'){
			return '/static/icon_favorite_selected.png'
		}
		if(props.itemType=='praise'){
			return '/static/icon_praise_selected.png'
		}
		
	})
	const handleCancel=()=>{
		emits('onCancel',props.itemIdx)
	}
	const handleToDetail=()=>{
		emits('onDetail',props.itemIdx)
	}
	
</script>

<style lang="less" scoped>
	.comp-favorite-praise-item {
		position: relative;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		box-sizing: border-box;

		.container-item {
			position: relative;
			width: 100%;
			padding: 26rpx 32rpx 32rpx;
			background: #213343;
			border-radius: 40rpx;
			box-sizing: border-box;
			.item-title-praise{
				position: relative;
				width: 100%;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.item-title{
					position: relative;
					flex:1;
					display: flex;
					display: -webkit-flex;
					flex-direction: row;
					align-items: center;
					.icon-Q{
						position: relative;
						width: 52rpx;
						height: 52rpx;
						background: rgba(255,255,255,0.1);
						border-radius: 50%;
						overflow: hidden;
						
						// &::after{
						// 	position: absolute;
						// 	content: 'Q';
						// 	font-size: 36rpx;
						// 	// font-family: PingFang SC;
						// 	font-weight: 500;
						// 	color: #FFFFFF;
						// 	top:50%;
						// 	left:50%;
						// 	transform: translate(-50%,-50%);
						// 	-webkit-transform: translate(-50%,-50%);
						// }
					}
					.wrap-title{
						position: relative;
						flex:auto;
						margin-left: 15rpx;
						margin-right: 43rpx;
						width: 0;
						font-size: 30rpx;
						line-height: 30rpx;
						// font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.icon{
					position: relative;
					width: 40rpx;
					height: 40rpx;
					box-sizing: border-box;
				}
			}
			.item-content{
				position: relative;
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				background: #182836;
				border: 1px solid rgba(255,255,255,0.2);
				border-radius: 24rpx;
				padding-left: 29rpx;
				padding-right: 29rpx;
				box-sizing: border-box;
				margin-top: 28rpx;
				overflow: hidden;
				
				font-size: 30rpx;
				// font-family: PingFang SC;
				font-weight: 400;
				color: #48C282;
			}
		}

	}
</style>